<template>
  <a-modal :visible="criticalValueVsisible" title="设置临界值" @ok="handOk" @cancel="handCancel" :width="'600px'">
    <div class="criticalBox">
      <div class="fromItem">
        <div class="label">研究院：</div>
        <div class="item">
          <a-select v-model="form.selectValue" placeholder="请选择" style="width: 100%" :allowClear="true" @change="valChange">
            <a-select-option v-for="(item, index) in selectArr" :key="index" :value="item">
              {{ item }}
            </a-select-option>
          </a-select>
        </div>
      </div>
      <div class="fromItem">
        <div class="label" style="">
          <a-switch v-model="form.delivery" />
        </div>
        <div class="item">
          <span class="switch">
            是否开启预警提醒
          </span>
        </div>
      </div>
      <div class="fromItem">
        <div class="number">
          <span class="startTitle">
            距离任务目标完成时间
          </span>
          <a-input-number class="inputNumber" v-model="form.maxValue" :min="1" :max="100000"/>
          <span class="end">
            天前（包含）
          </span>
        </div>
        <div class="lamp">
          <span class="lampName">健康状态：</span>
          <img src="~@/assets/manageMain/green.svg" alt="">
        </div>
      </div>
      <div class="fromItem">
        <div class="number">
          <span class="startTitle">
            距离任务目标完成时间
          </span>
          <a-input-number class="inputNumber" v-model="form.maxValue" :min="1" :max="100000"/>
          <span class="end">
            天至
          </span>
          <a-input-number class="inputNumber" v-model="form.minValue" :min="1" :max="100000"/>
          <span class="end">
            天
          </span>
        </div>
        <div class="lamp">
          <span class="lampName">健康状态：</span>
          <img src="~@/assets/manageMain/yellow.svg" alt="">
        </div>
      </div>
      <div class="fromItem">
        <div class="number">
          <span class="startTitle">
            距离任务目标完成时间
          </span>
          <a-input-number class="inputNumber" v-model="form.minValue" :min="1" :max="100000"/>
          <span class="end">
            天前（包含）
          </span>
        </div>
        <div class="lamp">
          <span class="lampName">健康状态：</span>
          <img src="~@/assets/manageMain/red.svg" alt="">
        </div>
      </div>
    </div>
  </a-modal>
</template>
<script>
import { getInstituteData, getProjectThresholds, setProjectThresholds } from "@/api/projectManage.js"
export default {
  name: 'setCritical',
  props: ['criticalValueVsisible'],
  data() {
    return {
      selectArr: [],
      form: {
        selectValue: '',
        delivery: true,
        maxValue: null,
        minValue: null,
      }
    };
  },
  watch: {
    criticalValueVsisible(val, oldVal) {
      if (val) {
        this.form.selectValue = ''
        this.form.delivery = true
        this.form.maxValue = null
        this.form.minValue = null
        this.getInstitute()
      }
    }
  },
  mounted() {},
  methods: {
    // 获取研究院
    getInstitute() {
      getInstituteData().then(res => {
        if (res && res.data.success) {
          if (res.data && res.data.data.length > 0) {
            this.selectArr = res.data.data
          } else {
            this.$message.warn('没有研究院数据')
          }
        } else {
          this.$message.error('获取研究院失败')
        }
      })
    },
    valChange(value) {
      if(value==undefined){
        this.form.delivery = true
        this.form.maxValue = null
        this.form.minValue = null
      }
      this.getProjectThresholdsData(value)
    },
    // 获取临界之
    getProjectThresholdsData(val) {
      let data = {
        institute: val
      }
      getProjectThresholds(data).then(res => {
        if (res.status === 200) {
          if (res.data && res.data.length > 0) {
            this.form.maxValue = res.data[0].maxValue
            this.form.minValue = res.data[0].minValue
            this.form.delivery = res.data[0].onOff
          }
        }
      })
    },
    // 设置临界值
    setProjectThresholdsData() {
      if (this.form.selectValue.length === 0) {
        this.$message.error('研究院不能为空')
        return
      } else if (!this.form.maxValue) {
        this.$message.error('最大值不能为空')
        return
      }  else if (!this.form.minValue) {
        this.$message.error('最小值不能为空')
        return
      } 
      let data = {
        institute: this.form.selectValue,
        maxValue: this.form.maxValue,
        minValue: this.form.minValue,
        onOff: this.form.delivery
      }
      setProjectThresholds(data).then(res => {
        if (res && res.data.success === true) {
          if (res.data) {
            this.$message.success('设置成功')
            this.$emit('submitCritical')
          }
        }
      })
    },
    handOk() {
      this.setProjectThresholdsData()
    },
    handCancel() {
      this.$emit('valueCancel')
    },
  }
}
</script>
<style lang="less" scoped>
.fromItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #333;
  margin-bottom: 15px;
  .label {
    flex: 0.15;
  }
  .item {
    flex: 1;
    .switch {
      color: #999999;
    }
  }
  .number, .lamp {
    color: #666666;
    display: flex;
    align-items: center;
  }
  .number {
    .inputNumber {
      margin: 0px 10px;
    }
  }
}
</style>